<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖函数实现</title>
</head>
<body>
    <input  />
</body>
<script>
    /**
     * 函数防抖（Debouncing）是一种常用的优化技术，它可以限制函数的执行频率，
     * 使得函数在连续触发时只执行一次。具体来说，当一个函数被调用后，
     * 如果在指定的时间间隔内再次调用，那么这次调用将被忽略，
     * 直到时间间隔过去后才会执行。
     * 
     * 高频，耗时，以最后一次调用为准
    */
    // 当我面输入框输入值或者改变窗口大小或者滚动滚动条的上回需要触发后端接口的时候可以使用防抖
    let onInput = document.querySelector('input')
    console.log('onInput', onInput)
    onInput.oninput = debounce(function () {
        console.log(this.value)
    }, 2000)

    function debounce (fn, delay) {
        let timer;
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            let args = arguments
            timer = setTimeout(() => {
                fn.call(this, args)
                timer = null
            }, delay)
        }
    }
</script>
</html>